<template>
  <div class="live-code-main">
    <div class="live-code-header">
      <div class="header-left">
        <div class="head-title">
          群活码
        </div>
        <img class="divider" src="@/assets/images/divider.png" />
        <el-select v-model="value" filterable>
          <el-option
            v-for="item in cities"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="small"
            >
            <div class="select-option-item">
              <span>{{ item.label }}</span>
              <i class="el-icon-circle-close icon-close" v-if="actived != item.value"></i>
            </div>
          </el-option>
          <div class="other-option">
            <a class="link">企业管理</a>
          </div>
        </el-select>
      </div>
      <div class="header-right">
        <el-button size="small" @click.stop="exportAll" v-hasPermi="['live-code:export']">
          <svg-icon class-name="export-icon" icon-class="export" />
          <span style="margin-left: 8px;">活码导出</span>
        </el-button>
        <el-button size="small" @click.stop="onNavigationTo('/hook/live-code/daily')" v-hasPermi="['live-code:data']">
          <svg-icon class-name="barchart-icon" icon-class="barchart" />
          <span style="margin-left: 8px;">数据统计</span>
        </el-button>
        <el-button size="small" @click="isshowDialog = true" v-hasPermi="['live-code:inviteSet']">邀请设置</el-button>
      </div>
    </div>
    <div class="live-code-wrap">
      <div class="card-search-filter">
        <el-dropdown placement="bottom-start">
          <el-button type="primary" size="small" v-hasPermi="['live-code:add']">
            <i class="el-icon-plus"></i>
            新建
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <div class="dropdown-menu-body">
              <div class="dropdown-menu-item" @click.stop="onNavigationTo('/hook/live-code/create?group_switch=0&active=0')">
                <span class="menu-title">普通群活码</span>
                <div class="menu-desc">扫码后直接显示相关群二维码，长按识别后加入该群</div>
              </div>
              <div class="dropdown-menu-item" @click.stop="onNavigationTo('/hook/live-code/create?group_switch=1')">
                <span class="menu-title">分组群活码</span>
                <div class="menu-desc">扫码后先选择分组，进入该分组群活码，长按识别加入该群</div>
              </div>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
        <el-input class="search-input" size="small" placeholder="搜手机号" suffix-icon="el-icon-search" />
        <el-select v-model="value" placeholder="活码类型" size="small" >
          <el-option
            v-for="item in codeStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="状态" size="small" >
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="创建开始日期"
          end-placeholder="创建结束日期"
          size="small"
          style="width: 280px;"
          >
        </el-date-picker>
        <el-select v-model="value" placeholder="建群号" size="small" >
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            >
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="主账号" size="small" >
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="list-box-wrap">
        <div class="box-item-content" v-for="i in 4" :key="i">
          <div class="flex-grid">
            <div class="column-item">
              <img class="qrcode-cover" src="https://cdn-qyb-hz.wxb.com/tmp/user/0/20240222/36d694329ca257bf4e92590b9757f3c7592801708593759.png" />
              <div class="live-code-info">
                <div class="name">群号</div>
                <div class="tag-list">
                  <span class="tag waring">已停用，群状态异常</span>
                  <span class="tag group">分组群活码</span>
                </div>
                <div class="datetime-info">
                  <span>2024-02-22 17:22</span>
                  <span style="margin-left: 10px;">主账号创建</span>
                </div>
              </div>
            </div>
            <div class="column-item">
              <div class="data-item">
                <div class="title">
                  今日长按
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">在群活码扫码页长按识别该活码下参<br/>与分配的群二维码的累计人数（不包<br/>含直接手机扫码入群的人数）</div>
                    <svg-icon icon-class="iquestion"/>
                  </el-tooltip>
                </div>
                <div class="count">0</div>
                <div class="total">累计：1</div>
              </div>
              <div class="data-item">
                <div class="title">
                  今日长按
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">群活码下的所有群自加入当前活码开<br/>始到现在为止的累计进群人数（不是<br/>通过该活码进群的人数也会统计在<br/>内）</div>
                    <svg-icon icon-class="iquestion"/>
                  </el-tooltip>
                </div>
                <div class="count">0</div>
                <div class="total">累计：1</div>
              </div>
            </div>
            <div class="column-item">
              <div class="data-item">
                <div class="title">可用群数</div>
                <div class="count">0</div>
                <div class="total">新建群数：5</div>
              </div>
              <div class="data-item">
                <div class="title">群总数</div>
                <div class="count">0</div>
                <div class="total">共有成员：19</div>
              </div>
            </div>
          </div>
          <div class="box-item-footer">
            <div class="button-list">
              <el-button plain class="button" v-hasPermi="['live-code:open']">开启</el-button>
              <el-button plain class="button" v-hasPermi="['live-code:down']">活码下载</el-button>
              <el-button plain class="button" @click="getAddPoster()" v-hasPermi="['live-code:poster']">生成海报</el-button>
              <el-button plain class="button" v-hasPermi="['live-code:copyLink']">复制活码链接</el-button>
            </div>
            <div class="button-list">
              <el-button plain class="button" @click.stop="onNavigationTo('/hook/live-code/daily')" v-hasPermi="['live-code:history']">历史数据</el-button>
              <el-button plain class="button" @click.stop="onNavigationTo('/hook/live-code/room-list')" v-hasPermi="['live-code:list']">群列表</el-button>
              <el-button plain class="button" @click.stop="onNavigationTo('/hook/live-code/creator-list')" v-hasPermi="['live-code:create']">建群号</el-button>
              <el-button plain class="button" v-hasPermi="['live-code:copy']">复制</el-button>
              <el-button plain class="button" v-hasPermi="['live-code:edit']">编辑</el-button>
              <el-button plain class="button" v-hasPermi="['live-code:del']">删除</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <SettingInviteDialog :visible="isshowDialog" />
    <!--    从客户群添加-->
    <addPoster v-if="showAddPoster" :visableIf.sync="showAddPoster"></addPoster>
  </div>
</template>
<script>
export default {
  data(){
    return {
      actived: 0,
      showAddPoster:false,
      isshowDialog: false,
      cities: [{
        value: '0',
        label: '志新'
      }, {
        value: '1',
        label: '锐行'
      }],
      codeStatus: [
      {
        value: 1,
        label: '普通群活码'
      }, {
        value: 2,
        label: '分组群活码'
      }],
      status: [
        {
          value: 1,
          label: '使用中'
        }, {
          value: 2,
          label: '已停用'
        }
      ]
    }
  },
  components: {
    SettingInviteDialog:()=>import('./components/SettingInviteDialog.vue'),
    addPoster:()=>import('./components/addPoster.vue'),
  },
  methods: {
    exportAll() {
      console.log('导出活码')
    },
    getAddPoster(){
      this.showAddPoster=true;
    },
    onNavigationTo(path) {
      this.$router.push(path)
    },
  },
}
</script>
<style lang="scss" scoped>
.live-code-main {
  .live-code-header {
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    .header-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .head-title {
        font-size: 14px;
        line-height: 22px;
        height: 48px;
        background: #fff;
        font-weight: 700;
        border-bottom: 1px solid #e9e9e9;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 11;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      .divider {
        margin: 0 20px;
        width: 1px;
        height: 16px;
      }
    }
  }
  .live-code-wrap {
    margin: 12px;
    background-color: #fff;
    border-radius: 4px;
    .card-search-filter {
      display: grid;
      column-gap: 8px;
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;
      grid-template-columns: 82px 200px 120px 100px 280px 162px 140px;
    }
    .list-box-wrap {
      overflow: auto;
      padding: 16px;
      height: calc(100vh - 190px);
      .box-item-content {
        border: 1px solid #f0f0f0;
        border-radius: 4px;
        &:not(:first-child) {
          margin-top: 16px;
        }
        .flex-grid {
          display: grid;
          grid-template-columns: 1fr 1fr minmax(406px, 1fr);
          .column-item {
            padding: 12px;
            display: flex;
            align-items: center;
            &:not(:first-child) {
              border-left: 1px solid #f0f0f0;
            }
            .qrcode-cover {
              width: 80px;
              height: 80px;
            }
            .live-code-info {
              margin-left: 12px;
              .name {
                font-size: 16px;
                font-weight: 700;
              }
              .tag-list {
                display: flex;
                align-items: center;
                margin: 6px auto;
                .tag {
                  color: rgba(0, 0, 0, .65);
                  font-variant: tabular-nums;
                  list-style: none;
                  font-feature-settings: "tnum", "tnum";
                  display: inline-block;
                  height: auto;
                  margin: 0 8px 0 0;
                  padding: 0 7px;
                  font-size: 12px;
                  line-height: 20px;
                  background: #fafafa;
                  border: 1px solid #e9e9e9;
                  border-radius: 4px;
                  opacity: 1;
                  transition: all .3s;
                  &.waring {
                    background: #ffe6e5;
                    border: 1px solid #fdb4af;
                  }
                  &.group {
                    background: #a2acc2;
                    border: 1px solid #a2acc2;
                  }
                  &:not(:first-child) {
                    margin-left: 6px;
                  }
                }
              }
              .datetime-info {
                display: flex;
                align-items: center;
                font-size: 12px;
                color: rgba(0, 0, 0, .45);
                span {
                  &:not(:first-child) {
                    margin-left: 6px;
                  }
                }
              }
            }
            .data-item {
              .title {
                color: rgba(0, 0, 0, .45);
                margin-bottom: 4px;
                font-size: 14px;
                line-height: 22px;
                i {
                  margin-left: 8px;
                  font-size: 16px;
                }
              }
              .count {
                margin-top: 4px;
                margin-bottom: 10px;
                font-size: 18px;
                font-weight: 600;
                color: rgba(0, 0, 0, .85);
                width: 150px;
              }
              .total {
                color: rgba(0, 0, 0, .45);
                display: block;
                margin-bottom: 4px;
                font-size: 14px;
                line-height: 22px;
              }
            }
          }
        }
        .box-item-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #f5f5f5;
          padding: 12px 16px;
          border-top: 1px solid #f0f0f0;
          .button-list {
            .button {
              height: 24px;
              padding: 0.8px 7px;
              font-size: 13px;
              border-radius: 4px;
            }
          }
        }
      }
    }
  }
}
</style>
<style>
.live-code-header .el-input--medium .el-input__inner {
  height: 28px;
  line-height: 28px;
  margin: 0;
  border-radius: 4px;
}
.live-code-header .el-input__inner {
  border: 1px solid #e9e9e9;
  background: #eff3ff!important;
  border-radius: 4px;
  transition: all .3s cubic-bezier(.645,.045,.355,1);
  color: rgba(0, 0, 0, .65);
  min-width: 200px;
  font-size: 14px;
  font-variant: tabular-nums;
  font-weight: 400;
  white-space: nowrap;
  line-height: 26px;
}
.live-code-header .el-select .el-input .el-select__caret {
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-scrollbar .select-option-item {
  height: 34px;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-scrollbar .select-option-item:hover .icon-close {
  display: block;
}
.el-scrollbar .select-option-item .icon-close {
  display: none;
}
.el-scrollbar .other-option {
  padding: 0 8px;
  color: #2f54eb;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e9e9e9;
}
.el-scrollbar .other-option > .link {
  font-size: 14px;
}
.dropdown-menu-body {
  padding: 8px 12px;
}
.dropdown-menu-body .dropdown-menu-item {
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  padding: 12px;
  color: rgba(0, 0, 0, .65);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
  cursor: pointer;
  transition: all .3s;
}
.dropdown-menu-body .dropdown-menu-item:hover {
  border: 1px solid #3070ff;
}
.dropdown-menu-body .dropdown-menu-item .menu-title {
  font-weight: 600;
  color: rgba(0, 0, 0, .85);
  margin-bottom: 2px;
}
.dropdown-menu-body .dropdown-menu-item:first-child {
  margin-bottom: 12px;
}
</style>
